<template>
  <div style="width: 3rem;height: 3rem;">

      <div class="pointer" @click="download">
        <div class="inline flex flex-col justify-center items-center">
          <svg
            t="1729577132387"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1480"
            width="200"
            height="200"
          >
            <path
              d="M0 0h1024v1024H0V0z"
              fill="#202425"
              opacity=".01"
              p-id="1481"
            ></path>
            <path
              d="M512 34.133333a273.1008 273.1008 0 0 1 271.018667 239.445334l0.8192 0.034133A221.866667 221.866667 0 0 1 768 716.8h-136.533333l-3.072-0.273067a17.066667 17.066667 0 0 1-13.755734-13.7216L614.4 699.733333 614.4 512a34.133333 34.133333 0 0 0-30.139733-33.8944L580.266667 477.866667h-136.533334a34.133333 34.133333 0 0 0-33.8944 30.139733L409.6 512v187.733333a17.066667 17.066667 0 0 1-14.0288 16.7936l-3.072 0.273067H256a221.866667 221.866667 0 0 1-23.6544-442.4704l8.635733-0.750933A273.1008 273.1008 0 0 1 512 34.133333z"
              fill="#11AA66"
              p-id="1482"
            ></path>
            <path
              d="M533.674667 981.1968l177.322666-164.420267a19.0464 19.0464 0 0 0 1.809067-25.429333 16.145067 16.145067 0 0 0-12.629333-6.280533H323.822933c-9.216 0-16.657067 8.055467-16.657066 18.0224 0 5.256533 2.116267 10.24 5.802666 13.653333l177.322667 164.4544a31.402667 31.402667 0 0 0 43.349333 0z"
              fill="#FFAA44"
              p-id="1483"
            ></path>
          </svg>
          <span style="font-size: 1rem;">
            {{ $t('Download')}}
          </span>
        </div>
      </div>
  </div>
</template>

<script setup>
import { ElNotification } from "element-plus";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const props = defineProps({
  course_url: {
    type: String,
    required: true,
  },
});
const download = async () => {
  if (!props.course_url) {
    ElNotification({
      title: "Error",
      message: t("urlRequired"),
      type: "error",
    });
    return;
  }

  try {
    // 从 URL 中获取文件名
    const fileName = props.course_url.split('/').pop() || 'dataset';
    
    // 使用 fetch 获取文件内容
    const response = await fetch(props.course_url);
    if (!response.ok) {
      throw new Error(t("fileNotFound"));
    }
    
    // 获取文件内容并创建 blob
    const blob = await response.blob();
    
    // 创建 blob URL
    const blobUrl = window.URL.createObjectURL(blob);
    
    // 创建一个隐藏的下载链接
    const link = document.createElement("a");
    link.style.display = 'none';
    link.href = blobUrl;
    link.setAttribute('download', fileName); // 强制下载属性
    
    // 添加到 DOM，触发点击，然后移除
    document.body.appendChild(link);
    link.click();
    
    // 清理
    setTimeout(() => {
      document.body.removeChild(link);
      window.URL.revokeObjectURL(blobUrl);
    }, 100);
    
    ElNotification({
      title: "Success",
      message: t("started"),
      type: "success",
    });
  } catch (error) {
    ElNotification({
      title: "Error",
      message: error.message || t("unavailable"),
      type: "error",
    });
  }
};
</script>

<style lang="scss" scoped>
.pointer {
  cursor: pointer;
  transition: transform 0.2s;
  
  &:hover {
    transform: scale(1.05);
  }
}

.icon {
  width: 24px;
  height: 24px;
}
</style>
